body {
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
body::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.navbarBgColor {
  background-color: #16375a;
  min-height: 4vh;
}
.menuMinHight {
  min-height: 8vh;
}
.welcomeL {
  background-color: #005067;
}
.welcomeM {
  background-color: #1d3050;
}
.menuCom {
  color: #ffffff;
  font-size: 0.8em;
  background-color: #296679;
}

.menuVer {
  color: #ffffff;
  font-size: 0.9em;
  background-color: #01536b;
}
.menuVerBg {
  background-color: #296679;
}
.welcomeHeight {
  min-height: 10vh;
}
.whiteColor {
  color: #ffffff;
}
.menu {
  background-color: #2f7d93;
  color: #ffffff;
  font-size: 0.9em;
  border-radius: 0px;
  min-height: 4rem;
  padding: 0;
  width: 100%;
}
.subMenu {
  background-color: #005067;
  font-size: 0.9em;
  color: #ffffff;
  border-radius: 0px;
  min-height: 4rem;
  padding: 0;
  width: 100%;
}
.subMenu:focus,
.subMenu.focus {
  outline: 0;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.25);
  /* background-image: url(../images/icon/color_bg_01.svg); */
  background-size: cover;
}
.subMenu:hover {
  color: #ffffff;
}

.subMenua.ctive {
  /* background-image: url(../images/icon/color_bg_01.svg); */
  background-size: cover;
}
.card {
  border: 0px;
  border-radius: 0rem;
}
/*.btn{
    color: #FFFFFF;
    border-radius:0px;
    min-height: 4rem;
    padding:0;
    width: 100%;
}*/
.ml-10 {
  margin-left: 40px !important;
  margin-left: 40px;
}
.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.25);
  /* background-image: url(../images/icon/color_bg_01.svg); */
  background-size: cover;
}
.btn:hover {
  color: #ffffff;
}
.card-header:first-child {
  border-radius: 0px;
}
.btn-block + .btn-block {
  margin-top: 0;
}
.shipInfo {
  font-size: 0.5em;
  min-height: 4rem;
  background-color: #eeeff1;
  color: #000000;
}
.shipInfoCol {
  min-height: 100%;
  border-right: #1d3050;
  border-style: solid;
  border-width: 15px;
  border: #1d3050;
}

.statusView {
  background-color: #d4eaf8;
  font-size: 0.6rem;
  color: #6a7b85;
}
.smallFontSize {
  font-size: 6px;
}

.statusViewContainer {
  min-height: 13vh;
  background-color: #eaf3fc;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.statusViewItem {
  min-height: 2vh;
  width: 100%;
}
.statusViewItemBg1 {
  background-color: #f40027;
}
.statusViewItemBg2 {
  background-color: #ec8e46;
}
.statusViewItemBg3 {
  background-color: #febd00;
}
.statusViewItemBg4 {
  background-color: #01c6fd;
}
.statusViewItemBg5 {
  background-color: #a63400;
}
.statusViewItemBg6 {
  background-color: #459742;
}
.statusViewItemBg7 {
  background-color: #a63400;
}
.statusViewItemBg8 {
  background-color: #4a575d;
}

.fixMargin {
  margin-left: -10px;
  /*margin-right: -10px;*/
}

.fixMarginLR {
  margin-left: -10px;
  margin-right: -10px;
}

.fixPadding {
  padding-right: 0px;
  padding-left: 15px;
}

.fixPaddingall2 {
  padding-right: 2px;
  padding-left: 2px;
}

.fixPaddingall {
  padding-right: 0px;
  padding-left: 0px;
}
.fixPaddingall1 {
  padding-right: 21px;
  padding-left: 21px;
}
.fixPaddingallL {
  padding-left: 21px;
}

.blueBorder {
  border: 1px solid #01c6fd;
}

.statusMachine {
  color: #ffffff;
  /* background-image: url('../images/icon/bg_lan.gif'); */
  min-height: 3vh;
}
.rowEmpty30 {
  min-height: 3.5vh;
  width: 100%;
}
.rowEmpty {
  min-height: 1.5vh;
  width: 100%;
}
.rowEmpty05 {
  min-height: 0.5vh;
  width: 100%;
}
.rowEmpty05Blue {
  min-height: 0.5vh;
  width: 120%;
  background-color: #1d3050;
}
.rowEmpty08 {
  min-height: 0.8vh;
  width: 100%;
}
.whiteNormal {
  color: #ffffff;
  font-size: 0.8rem;
}
.statusTitle {
  color: #000000;
  font-size: 1rem;
  font-weight: bold;
}

.statusSubTitle {
  color: #000000;
  font-size: 0.6rem;
  font-weight: bold;
}
.statusMachineRight {
  color: #000000;
  background-color: #e6f5fc;
  min-height: 3vh;
  font-size: 0.6rem;
}

.form-control-datepicker {
  display: block;
  width: 100%;
  height: calc(1.1em+ 0.75rem+ 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.6rem;
  font-weight: 100;
  line-height: 1.1;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px olid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control-datepicker:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}

.form-control {
  display: block;
  width: 100%;
  height: calc(1.2em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.2;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.nav-link {
  color: #ffffff;
  display: block;
  padding: 0.2rem 0rem;
  font-size: 0.8em;
  width: 100%;
  background-color: #297585;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
  color: #ffffff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #ffffff;
  background-color: #029cbe;
  border-color: #dee2e6 #dee2e6 #fff;
  width: 100%;
}

.nav-link1 {
  color: #000000;
  display: block;
  padding: 0.2rem 0rem;
  font-size: 0.8em;
  width: 100%;
  background-color: transparent;
}

.nav-link1:hover,
.nav-link1:focus {
  text-decoration: none;
  color: #000000;
}

.nav-tabs .nav-link1.active,
.nav-tabs .nav-item.show .nav-link1 {
  color: #ffffff;
  background-color: #029cbe;
  border-color: #dee2e6 #dee2e6 #fff;
  width: 100%;
}

.fixTop {
  margin-top: -80px;
}

.maneuverBG {
  background-color: #00d5cd;
}
.constantSpeedBG {
  background-color: #f9e605;
}
.goodBG {
  background-color: #869ae3;
}
.stopBG {
  background-color: #ff5681;
}
.supplyBG {
  background-color: #a2d15b;
}

.mapContainer {
  min-height: 70vh;
  width: 100%;
  position: relative;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
.mapContainer::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.vhFull {
  /*min-height: 74vh;
    //height:74vh;
    max-height: 74vh;*/
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
.vhFull::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.standHeight {
  min-height: 80vh;
  height: 80vh;
  max-height: 80vh;
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
.standHeight::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

/*容量图Chart 顶部没圆角border: darkgrey solid 1px;*/
.div_style {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 80%;
  width: 100%;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
/*容量图Chart 2 底部没圆角*/
.div_style_2 {
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 80%;
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.input-group-append {
  width: 40px !important;
}

.bg-green {
  background-color: #eaf8eb;
}
.border-green {
  border-color: #569045;
  border-width: 1px;
  border-style: solid;
}

#alarmContent td {
  padding: 0 0;
  vertical-align: middle;
}

#scrollContainer {
  width: 100%;
  height: 1.5em;
  overflow: hidden;
  margin: auto;
}
.scon {
}

.bigFont {
  font-size: 18px;
  font-weight: bold;
}
.normalFont {
  font-size: 14px;
  font-weight: bold;
}
.smallBlodFont {
  font-size: 12px;
  font-weight: bold;
}
.blueFont {
  color: #119db4;
}
.greenFont {
  color: #4c8847;
}
.my-modal-dialog {
  width: 100%;
  max-width: 100%;
}
.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px; /*Fix for safari gap*/
  min-height: 100px;
  max-height: 150px;
}
/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }
  .content {
    height: 30vh;
  }
  h1 {
    font-size: 24px;
  }
}
